<template>
    <div style="text-align: center; font-family: '宋体'; height: 100vh;cursor: context-menu;">
        <div>
            <h3 style="padding: 50px 0px 30px 0px;margin: 0px;font-size: 1.3em;">人员资料
                <!-- <router-link to="/" class="close">返回</router-link> -->
                <router-link to="/main/renshi/yuangongdangan" class="close" :title="'关闭'">✖</router-link>
                <!-- <span class="close" @click="goBack" :title="'关闭'">✖</span> -->
            </h3>
        </div>
        <!-- 添加查询输入框和按钮 -->
        <div style="margin-bottom: 5px;display: flex;align-items: center;margin-left:80px ;">
            <input class="search-input" type="text" v-model="searchKeyword" placeholder="输入姓名或职位进行查询">
            <button class="btn" @click="searchPersonnel">查询</button>
            <button class="btn" @click="resetSearch">重置</button>
            <!-- <span>性别筛选：</span> -->
            <select class="sel" v-model="genderFilter" @click="genderFilterChange">
                <option value="">性别筛选</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <button class="new"><router-link to="/main/ruzhi/ruzhientry"
                    style="text-decoration: none;color: black;">新增</router-link></button>
            <!-- @click="nuwentry" -->
        </div>
        <div style="min-width: 80%; min-height: 70%; background-color: #fafad791;;">
            <table border="1" style="width: 90%;margin: 0 auto;">
                <!--  -->
                <thead>
                    <tr style="height: 45px;">
                        <!-- 多选框 -->
                        <th><input type="checkbox" v-model="isAllSelected" @change="toggleAllSelection"></th>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别
                        </th>
                        <th>学历</th>
                        <th>职位</th>
                        <th>填表日期</th>
                        <th>详情</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(person, index) in displayedPersonnel" :key="index">
                        <td>
                            <input type="checkbox" v-model="selectedPersonnel" :value="person"
                                @change="updateAllSelectedStatus">
                        </td>
                        <td>{{ getActualIndex(index) }}</td>
                        <td>{{ person.name }}</td>
                        <td>{{ person.gender }}</td>
                        <td>{{ person.educationLevel }}</td>
                        <td>{{ person.applicationPosition }}</td>
                        <td v-if="person.applicationYear !== null">
                            {{ person.applicationYear }}年{{
                                person.applicationMonth
                            }}月{{ person.applicationDay }}日
                        </td>
                        <td v-else></td>
                        <td>
                            <router-link class="router-link-active"
                                :to="{ name: 'danganentrytable', params: { id: person.id, index: getActualIndex(index) - 1 } }">
                                查看详情
                            </router-link>
                        </td>
                        <td>
                            <!-- @click="editEmployee(person.id)" -->
                            <button class="edit-button">编辑</button>
                            <button class="delete-button" @click="deleteEmployee(person.id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="padding-top: 10px;">
            <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
            <span>第 <input style="outline: none; width: 3%;text-align: end;" type="number" min="0"
                    v-model="currentPage"> 页，共 {{ totalPages }} 页</span>
            <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "renyuanZiliao",
    data() {
        return {
            personnelData: [],
            currentPage: 1,
            itemsPerPage: 10,
            selectedPersonnel: [],
            isAllSelected: false,//是否全选
            searchKeyword: '', // 查询关键词
            originalPersonnelData: [], // 保存原始数据
            genderFilter: '' // 性别筛选条件
        };
    },
    computed: {
        goBack() {
            return () => {
                this.$router.go(-1);
            };
        },
        totalPages() {
            return Math.ceil(this.personnelData.length / this.itemsPerPage);
        },
        displayedPersonnel() {
            const startIndex = (this.currentPage - 1) * this.itemsPerPage;
            const endIndex = startIndex + this.itemsPerPage;
            return this.personnelData.slice(startIndex, endIndex);
        }
    },
    methods: {
        // 获取实际索引
        getActualIndex(index) {
            return (this.currentPage - 1) * this.itemsPerPage + index + 1;
        },
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },
        // 获取数据
        async fetchData() {
            try {
                const response = await axios.get("/amsp/entry/list"); // 根据实际后端 API 地址调整
                console.log("aaaa", response);
                this.personnelData = response.data;
                this.originalPersonnelData = response.data; // 保存原始数据
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        },
        deleteEmployee() {
            // axios.delete("/amsp/entry/delete/" + id)
            //     .then(response => {
            //          console.log(response);
            //         this.fetchEmployeeData();//重新获取数据
            //         this.$message.success("删除成功");
            //     })
            //     .catch(error => {
            //         console.error("Error deleting employee:", error);
            //     });
        },
        //全选
        toggleAllSelection() {
            if (this.isAllSelected) {
                this.displayedPersonnel.forEach(person => {
                    if (!this.selectedPersonnel.includes(person)) {
                        this.selectedPersonnel.push(person);
                    }
                });
            } else {
                this.displayedPersonnel.forEach(person => {
                    const index = this.selectedPersonnel.indexOf(person);
                    if (index > -1) {
                        this.selectedPersonnel.splice(index, 1);
                    }
                });
            }
        },
        updateAllSelectedStatus() {
            this.isAllSelected = this.displayedPersonnel.every(person => this.selectedPersonnel.includes(person));
        },

        // 查询人员
        searchPersonnel() {
            this.currentPage = 1; // 重置页码
            if (this.searchKeyword || this.genderFilter) {
                this.personnelData = this.originalPersonnelData.filter(person => {
                    return person.name.includes(this.searchKeyword) || person.applicationPosition.includes(this.searchKeyword);
                });
            } else {
                this.personnelData = this.originalPersonnelData;
                this.$message.error('请输入要查询关键字');
            }
        },
        // 性别筛选
        genderFilterChange() {
            this.currentPage = 1; // 重置页码
            if (this.genderFilter) {
                this.personnelData = this.originalPersonnelData.filter(person => {
                    return this.genderFilter === '' || person.gender === this.genderFilter;
                });
            } else {
                this.personnelData = this.originalPersonnelData;
            }
        },
        // 重置查询
        resetSearch() {
            this.searchKeyword = '';
            this.currentPage = 1; // 重置页码
            this.personnelData = this.originalPersonnelData;
        }
    },
    mounted() {
        this.fetchData();
    }
};
</script>

<style scoped lang="scss">
body {
    font-family: '宋体';
    font-size: 16px;
}

.edit-button {
    border-radius: 0px;
    border: 1px solid #ccc;
    font-family: '宋体';
}

.delete-button {
    margin-left: 5px;
    border-radius: 0px;
    border: 1px solid #ccc;
    font-family: '宋体';
}

.btn {
    /*重置和查询 */
    padding: 1px;
    margin: 0px 8px;
    border-radius: 0px;
    border: 1px solid #ccc;
    font-family: '宋体';
    background-color: white
}

.sel {
    border-radius: 0px;
    outline: none;
    font-family: '宋体';
}

.new {
    padding: 1px;
    float: right;
    margin-left: 50%;
    border-radius: 0px;
    border: 1px solid #ccc;
    font-family: '宋体';
    background-color: white;
}

.edit-button:hover,
.delete-button:hover,
.new:hover,
.btn:hover {
    color: #333;
    background-color: #d8d8d8;
}

.edit-button:active,
.delete-button:active,
.new:active,
.btn:active {
    color: #333;
    background-color: #F0F0F0;
}

.search-input {
    color: #333;
    outline: none;
    /* 取消聚焦边框 */
    border-radius: 0px;
    border: 1.5px solid #ccc;
    font-family: '宋体';
    width: 150px;
}

.search-input:focus {
    /* 设置搜索姓名职位输入框的聚焦边框 */
    border: 1.5px solid rgb(146, 190, 255);
    box-shadow: 0 0 5px rgba(146, 190, 255, 0.3);
    /* 可选：添加聚焦时的阴影效果 */
}

table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f0f0f0;
}

tbody tr:hover {
    background-color: #ffffff;
    transition: background-color 0.3s;
}

.close {
    text-decoration: none;
    font-size: 0.9em;
}

.close :hover {
    color: red;
}

.router-link-active {
    text-decoration: none;
}

.router-link-active:hover {
    text-decoration: revert;
    transition: background-color 0.3s;
}
</style>